/* eslint no-unused-vars:0 */
import React from 'react';
import MenuConfig from './../../config/menuConfig';
import { Menu, Icon, Badge, Button } from 'antd';
import { NavLink } from 'react-router-dom';
import './index.less';
import './../../style/style.less';
import PubSub from 'pubsub-js';

const SubMenu = Menu.SubMenu;

export default class NavLeft extends React.Component {
    constructor() {
        super();
        this.state = {
            ourSchoolMessageNum: 0, // 我校动态消息数量
            riskMessageNum: 0, // 风险评估消息数量
            managerStyle: {
                visibility: ''
            },
            marginStyle: {
                marginTop: 'calc(100vh - 320px)'
            },
            show: true,
            responseData: [],
            menuTreeNode: []
        };
    }
    sub = (topic, num) => {
        this.state.ourSchoolMessageNum = num;
        this.forceUpdate();
        this.setState({
            menuTreeNode: this.renderMenu(this.state.responseData)
        });
    };
    componentWillUnmount() {
        PubSub.unsubscribe(this.pubsub_messageNum);
    }
    async componentWillMount() {
        this.getMessageNum();
        this.pubsub_messageNum = PubSub.subscribe('PubSubMessageNum', this.sub);
        this.state.managerStyle.visibility =
            localStorage.getItem('userType') == '0' ? 'hidden' : 'visible';
        //请求主列表数据

        await this.getRoutetList();
        const menuTreeNode = this.renderMenu(this.state.responseData);
        this.setState({
            menuTreeNode
        });
    }

    onChange = (show) => {
        this.state.show = 'false';
    };
    /**
     * @desc 获取消息数量
     */
    getMessageNum = () => {
        this.$post('/trends/unread/amount')
            .then((res) => {
                if (res) {
                    this.sub(
                        '',
                        Object.values(res.amountMap).reduce((a, b) => a + b)
                    );
                }
            })
            .catch((e) => {
                console.log(e);
            });
    };
    getRoutetList = () => {
        this.state.responseData = MenuConfig;
        this.$get('/trends/menu/rootList')
            .then((res) => {
                //将动态加载菜单存进缓存中
                localStorage.setItem(
                    'ourSchoolRoute',
                    JSON.stringify(res.rootList)
                );
                localStorage.setItem(
                    'othersSchoolRoute',
                    JSON.stringify(res.rootList)
                );
            })
            .catch((e) => {
                console.log(e);
            });
    };

    //菜单渲染
    renderMenu = (data) => {
        //Map遍历数组但不会改变原来数组的值
        return data.map((item) => {
            if (item.children) {
                if (item.key == '/admin/Backmanage') {
                    return (
                        <SubMenu
                            title={
                                <span>
                                    <Icon type={item.type} />
                                    <span>{item.title}</span>
                                </span>
                            }
                            style={this.state.managerStyle}
                            key={item.key}>
                            {this.renderMenu(item.children)}
                        </SubMenu>
                    );
                }
                if (item.key == '/admin/SelfCheckingSystem') {
                    return (
                        <SubMenu
                            style={this.state.marginStyle}
                            title={
                                <span>
                                    <Icon type={item.type} />
                                    <span>{item.title}</span>
                                </span>
                            }
                            key={item.key}>
                            {this.renderMenu(item.children)}
                        </SubMenu>
                    );
                } else {
                    return (
                        <SubMenu
                            title={
                                <span>
                                    <Icon type={item.type} />
                                    <span>{item.title}</span>
                                </span>
                            }
                            key={item.key}>
                            {this.renderMenu(item.children)}
                        </SubMenu>
                    );
                }
            } else {
                if (item.key == '/admin/OurSchoolSituation') {
                    // if (/^\/admin\/OurSchoolSituation/.test(item.key)) {
                    return (
                        <Menu.Item title={item.title} key={item.key}>
                            <NavLink
                                to={item.key}
                                onClick={this.onChange}
                                checked={this.state.show}>
                                <Icon type={item.type} />
                                {item.title}&nbsp;&nbsp;
                                <Badge count={this.state.ourSchoolMessageNum} />
                            </NavLink>
                        </Menu.Item>
                    );
                }
                if (item.key == '/admin/RiskAssessment') {
                    // <Badge count={3} />
                    return (
                        <Menu.Item title={item.title} key={item.key}>
                            <NavLink
                                to={item.key}
                                onClick={this.onChange}
                                checked={this.state.show}>
                                <Icon type={item.type} />
                                {item.title}&nbsp;&nbsp;
                                <Badge count={this.state.riskMessageNum} />
                            </NavLink>
                        </Menu.Item>
                    );
                }
                return (
                    <Menu.Item title={item.title} key={item.key}>
                        <NavLink
                            to={item.key}
                            onClick={this.onChange}
                            checked={this.state.show}>
                            <Icon type={item.type} />
                            {item.title}
                        </NavLink>
                    </Menu.Item>
                );
            }
        });
    };
    render() {
        return (
            <div className="nav-left">
                {/*<div className="logo">
                    <img src="/pic/" alt="" />
                </div>*/}
                <div>
                    <Menu theme="dark">{this.state.menuTreeNode}</Menu>
                </div>
            </div>
        );
    }
}
